<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>State Management | Raxan User Guide</title>
    <link href="../raxan/styles/master.css" rel="stylesheet" type="text/css" />
    <!--[if IE]><link rel="stylesheet" href="../raxan/styles/master.ie.css" type="text/css"><![endif]-->
    <link href="style.css" rel="stylesheet" type="text/css" />
    <link href="highlight/styles/default.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="highlight/highlight.js"></script>
    <script type="text/javascript">
        hljs.initHighlightingOnLoad('javascript','html','php');
    </script>

</head>

<body>
    <div class="container c48 prepend-top">
        <h2 class="bottom">Raxan User Guide</h2>
        <div class="navbar">
            <div class="lf"><div class="rt"><div class="md">
                <ul>
                    <li><a href="../index.html" title="The Rich Ajax, CSS &amp; PHP Framework" >Home</a></li>
                    <li><a href="table-of-contents.html" title="Blog Posts" >Table Of Contents</a></li>
                    <li><a href="../php-examples/index.php" title="PHP Examples" >PHP Examples</a></li>
                    <li><a href="../css-examples/index.html" title="User Guide" >CSS Examples</a></li>
                </ul>
            </div></div></div>
        </div>
        <div class="prepend1 append1">
            <div class="ltm" align="right">
                <a href="table-of-contents.html" title="Show Table of Content">
                    <img src="images/toc-button.png"  alt="Table of Contents" />
                </a>
            </div>
            <h2>State Management</h2>

<p>Preserving the state of an element can be useful when designing applications that needs to retain the attributes and content of an element across multiple web pages.</p>

<p>To preserve the state of an element you will need to add the xt-preservestate extended attribute to the element, or call the RaxanElement->preserverState() method. States can be either local to a page or global to the current user session.</p>

<p>Format:</p>

<pre><code>xt-preservestate = "local|global" 
</code></pre>

<ul>
<li>local - (Default) Preserves state during page post back.</li>
<li>global - Preserves state across multiple web pages</li>
</ul>

<p>Here's an example of a locally preserved element:</p>

<pre><code>&lt;?php require_once('raxan/pdi/autostart.php'); ?&gt;

&lt;p id="myid" xt-preservestate="local"&gt;
    Lorem ipsum cu nam impedit efficiantur, ei aperiri dissentiet eos, mea dico error saperet in.
&lt;/p&gt;
&lt;a href="#" xt-bind="click,changeColor"&gt;Click to Change Color&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;
&lt;a href="#" xt-bind="click,doNothing"&gt;Click to Reload Page&lt;/a&gt;

&lt;?php
    class NewPage extends RaxanWebPage {

        // change paragraph color
        protected function changeColor($e) {
            $this-&gt;myid-&gt;css('background','#ffcc00');
        }

        protected function doNothing($e) {
            ;
        }
    }

?&gt;
</code></pre>

<p>When the user clicks on the link to change the background color the of the &lt;p&gt; tag, the framework record the changes and preserve the state of the element during post backs.</p>

<p>When the "Reload Page" link is clicked the &lt;p&gt; tag element will be display with the new background color.</p>

<p>The "global state" is very similar to "local state" with the exception that the state is preserved for duration of the user session. This means that an element can maintain it's state across web pages.</p>

<p>If we were to modify the above example and set xtpreservestate="global", then the framework will preserve and display the last saved state of myid across multiple web pages.</p>

<pre><code>&lt;?php require_once('raxan/pdi/autostart.php'); ?&gt;

&lt;p id="myid" xt-preservestate="global"&gt;
    Lorem ipsum cu nam impedit efficiantur, ei aperiri dissentiet eos, mea dico error saperet in.
&lt;/p&gt;

&lt;?php
    class AnbotherPage extends RaxanWebPage {

        protected function _load($e) {
            // code here
        }

    }

?&gt;
</code></pre>

        </div>
        <div class="tpb pad" style="text-align:right">
            <div class="right ltm">
                <a href="table-of-contents.html" title="Back to Table of Content">
                    <img src="images/toc-button.png"  alt="Table of Contents" />
                </a>
            </div>
        </div>
    </div>
</body>

</html>

